<template>
  <div class="content">
    <div class="water">
      <div class="water-box" :style="{width:'auto',height :'100vh'}">
          <div class="water-title">
            <p>工艺处理效果<i class="gl"></i><i class="gl"></i></p>
          </div>
        <chart :options="chart" auto-resize></chart>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'waterD',
    data () {
      return {
        chart:{
          color:['#fb66d6','#7ee5ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data:['处理成本','ORP均值'],
            top: 20,
          },
          dataZoom: {
            show: false,
          },
          xAxis: [
            {
              type: 'category',
              data: ['A2O+人工湿地_2','微生态滤床','A2O+人工湿地_4','多介质生物绿地（50-80T）','多介质生物绿地（5-30T）','A2O+人工湿地_3','A2O+人工湿地_1'],
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '处理成本（千瓦时/吨）',
              splitLine: {lineStyle: {color: 'rgba(0,0,0,0)'}}
            },
            {
              type: 'value',
              name: 'ORP均值（mV）',
              max: function(value) {
                return value.max + 100;
              },
              splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}}
           
            }
          ],
          series: [
            {
              name:'处理成本',
              barWidth: 30,
              type:'bar',
              data: [120,160,170,140,250,500,600],
              itemStyle: {
                normal: {
                  barBorderRadius: [4,4,0,0],
                }
              }
            },
            {
              name:'ORP均值',
              type:'line',
              symbol: 'circle',
              yAxisIndex: 1,
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(100, 100, 120, 0.5)',
                shadowOffsetY: 4,
                shadowBlur: 10
              },
              symbolSize: 8,
              data: [14,40,60,70,100,120,100]
            }
          ],
        }
      }
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/processanalysis/data')
        .then( response=> {
          let _data = response.data.body  
          this.chart.xAxis[0].data = _data.processAnalysis.xAxis
          this.chart.series[0].data = _data.processAnalysis.series[1]['处理成本']
          this.chart.series[1].data = _data.processAnalysis.series[0]['ORP均值']
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../style/water.css';
  .echarts {
    height: 90%;
    width: 100%;
  }
</style>